<template>
	<view class="tabbar">
		<view class="tabbar-item flex-center-col" v-for="(item, index) in tabBarList" :key="index"
			@click="switchTab(item, index)">
			<icon :title="item.icon" size="18" :color="currentTab === index ? '#000000' : '#999999'"></icon>
			<text :style="{ color: currentTab === index ? '#000000' : '#999999' }">{{ item.text }}</text>
		</view>
	</view>
</template>

<script>
import icon from '../icon/icon.vue'
export default {
	components: {
		icon,
	},
	data() {
		return {
			currentTab: -1, // 当前选中的 tabBar 索引
			tabBarList: [{
				text: '首页',
				icon: "home",
				pagePath: '/pages/home/home'
			},
			{
				text: '商店',
				icon: "shop",
				pagePath: '/pages/shop/shop'
			},
			{
				text: '我的',
				icon: 'person',
				pagePath: '/pages/person/person'
			},
			]
		};
	},
	mounted() {
		const pages = getCurrentPages(); // 获取当前页面栈数组
		const currentPage = pages[pages.length - 1]; // 获取当前页面实例
		const currentRoute = currentPage.route; // 获取当前页面的路由
		console.log('getCurrentPages', currentRoute); // 打印当前页面的路由路径
		this.tabBarList.forEach((item, index) => {
			if (item.pagePath.includes(currentRoute)) {
				this.currentTab = index;
			}
		});
	},
	methods: {
		switchTab(item, index) {
			if (this.currentTab !== index) {
				uni.switchTab({
					url: item.pagePath
				});
			}
		}
	}
};
</script>

<style lang="scss">
.tabbar {
	display: flex;
	justify-content: space-around;
	background-color: #fff;
	position: fixed;
	bottom: 0;
	width: 100%;
	padding: 10px 0 30px 0;
	box-shadow: 0 0 5px 0 rgba(75, 75, 75, 0.2);
}

.tabbar-item {
	flex: 1;
}

.tabbar-item text {
	display: block;
	margin-top: 5px;
	font-size: 14px;
}
</style>